<!--
 * 搜索页面
 * @Author: xurenda <xurenda@qq.com>
 * @HomePage: https://xurenda.top
 * @Github: https://github.com/xurenda
 * @Date: 2019-10-09 22:19:54
 * @LastEditTime: 2019-11-15 17:24:56
 * @FilePath: \elegant-surf\src\views\Search.vue
 -->
<template>
<div id="search">
  <header class="header" :style="{ backgroundColor }">
    <div class="container">
      <back-home />
      <search-bar class="search-bar" :value="$route.query.q" />
      <change-engine />
    </div>
  </header>
  <app-iframe />
</div>
</template>

<script>
import BackHome from '@/components/search/BackHome'
import SearchBar from '@/components/home/SearchBar'
import ChangeEngine from '@/components/search/ChangeEngine'
import Iframe from '@/components/search/Iframe'

export default {
  name: 'search',
  components: {
    BackHome,
    SearchBar,
    ChangeEngine,
    AppIframe: Iframe
  },
  data() {
    return {
      backgroundColor: this.$store.state.background.color
    }
  }
}
</script>

<style lang="stylus">
#search
  width 100vw
  height 100vh
  overflow hidden
  .header
    position fixed
    top 0
    left 0
    right 0
    z-index 99999
    border-bottom 1px solid rgba(0, 0, 0, .1)
    .container
      height 55px
      padding 0 50px
      box-sizing border-box
      display flex
      justify-content space-between
      align-items center
    .search-bar
      margin 0 26px
      height 36px
      width 500px
</style>
